<template>
	<view class="log">
		<c-section title="操作日志" action="clear" @click="handleClear"></c-section>
		<view v-if="oprLogs.length>0" class="wrapper">
			<scroll-view :scroll-y="true" :style="{height: systemInfo.scrollHeight+'px'}">
				<view v-for="(log, i) in oprLogs" :key="i" class="row">
					<view class="top">
						<view class="icon">
							<icon :type="log.type" size="16" />
						</view>
						<view class="title">
							{{log.title}}
						</view>
						<view class="time">
							{{log.time}}
						</view>
					</view>
					<view class="bottom">
						<view class="content" @longpress="handleClipboard(log.content)">
							{{log.content}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-else class="no-data-remark">
			<image class="icon" src="~@/static/img/no-data.png" mode=""></image>
			<view class="remark">
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex';

	export default {
		computed: {
			...mapGetters('system', ['systemInfo']),
			...mapGetters('log', ['oprLogs'])
		},
		methods: {
			handleClear() {
				const that = this;

				if (that.oprLogs.length > 0) {
					uni.showModal({
						title: '系统提示',
						content: '确认清空所有日志?',
						success(res) {
							if (res.confirm) {
								that.clearOprLog();
							}
						}
					});
				}
			},
			handleClipboard(data) {
				uni.setClipboardData({
					data,
					showToast: true
				});
			},
			...mapMutations('log', ['clearOprLog'])
		}
	}
</script>

<style lang="scss">
	.log {
		.wrapper {
			padding: 0 20rpx;

			.row {
				padding: 15rpx 0;
				border-bottom: solid 1px $uni-border-color;

				.top {
					display: flex;
					justify-content: start;
					align-items: center;
					padding-bottom: 10rpx;

					.icon {
						padding: 0 10rpx;
					}

					.title {
						flex: 1;
					}

					.time {
						flex: 1;
						color: $uni-text-color-grey;
						padding-right: 10rpx;
						text-align: right;
					}
				}

				.bottom {
					display: flex;
					justify-content: start;
					align-items: center;

					.content {
						flex: 1;
						white-space: normal;
						word-break: break-all;
						word-wrap: break-word;
						padding: 4rpx 10rpx 0;
					}
				}
			}
		}

		.no-data-remark {
			color: $uni-text-color-grey;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 50%;

			.icon {
				width: 80rpx;
				height: 80rpx;
			}

			.remark {
				padding-top: 10rpx;
			}
		}
	}
</style>
